<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6"
        ><Detail title="总销售" number="12306">
          <template v-slot:charts>
            <span class="spanfont">周同比 56.67%</span>
            <svg
              t="1662037993562"
              class="icon"
              viewBox="0 0 1025 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3739"
              width="16"
              height="16"
            >
              <path
                d="M131.339914 423.017198c-9.52111 9.670597-9.400291 25.229558 0.270306 34.750668 9.670597 9.522134 25.229558 9.401315 34.750668-0.269282l320.722863-325.740925 0 798.397108c0 13.5716 11.001648 24.573248 24.573248 24.573248 13.5716 0 24.573248-11.001648 24.573248-24.573248L536.230246 135.522485l315.80719 320.551874c9.523157 9.667525 25.084167 9.783224 34.750668 0.259043 9.667525-9.524181 9.784248-25.083143 0.259043-34.750668L552.305246 81.813557c-11.058985-11.331339-25.865391-17.688643-41.702849-17.905707-0.277473-0.004096-0.554946-0.005119-0.832419-0.005119-15.559985 0-30.237381 5.957989-41.412066 16.831651-0.124914 0.121842-0.249828 0.245732-0.372694 0.370646L131.339914 423.017198z"
                p-id="3740"
              ></path>
            </svg>
            <span class="spanfont">日同比 19.54%</span>
            <svg
              t="1662038122255"
              class="icon"
              viewBox="0 0 1025 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5715"
              width="16"
              height="16"
            >
              <path
                d="M467.985218 937.525717c0.122866 0.124914 0.24778 0.248804 0.372694 0.370646 11.174684 10.873662 25.852081 16.831651 41.412066 16.831651 0.277473 0 0.554946-0.001024 0.832419-0.005119 15.837458-0.217064 30.643864-6.574368 41.702849-17.905707l334.741901-339.769178c9.525205-9.667525 9.408482-25.226487-0.259043-34.750668-9.666501-9.524181-25.227511-9.408482-34.750668 0.259043l-315.80719 320.551874L536.230246 88.475979c0-13.5716-11.001648-24.573248-24.573248-24.573248-13.5716 0-24.573248 11.001648-24.573248 24.573248l0 798.397108L166.360888 561.132161c-9.52111-9.670597-25.080071-9.791415-34.750668-0.269282-9.670597 9.52111-9.791415 25.080071-0.270306 34.750668L467.985218 937.525717z"
                p-id="5716"
              ></path>
            </svg>
          </template>
          <template v-slot:footer>
            <span style="font-size: 16px">日销售额:$23123 </span>
          </template>
        </Detail>
      </el-col>
      <el-col :span="6"
        ><Detail title="访问量" number="8806">
          <template v-slot:charts> <LineCharts></LineCharts> </template>
          <template v-slot:footer>
            <span style="font-size: 16px">日访问:23123 </span>
          </template>
        </Detail>
      </el-col>
      <el-col :span="6"
        ><Detail title="支付笔数" number="123">
          <template v-slot:charts> <BarCharts /></template>
          <template v-slot:footer>
            <span style="font-size: 16px">转化率:49% </span>
          </template>
        </Detail>
      </el-col>
      <el-col :span="6"
        ><Detail title="运营获得效果" number="78%">
          <template v-slot:charts> <ProgressCharts /> </template>
          <template v-slot:footer>
            <span class="spanfont">周同比 56.67%</span>
            <svg
              t="1662037993562"
              class="icon"
              viewBox="0 0 1025 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3739"
              width="16"
              height="16"
            >
              <path
                d="M131.339914 423.017198c-9.52111 9.670597-9.400291 25.229558 0.270306 34.750668 9.670597 9.522134 25.229558 9.401315 34.750668-0.269282l320.722863-325.740925 0 798.397108c0 13.5716 11.001648 24.573248 24.573248 24.573248 13.5716 0 24.573248-11.001648 24.573248-24.573248L536.230246 135.522485l315.80719 320.551874c9.523157 9.667525 25.084167 9.783224 34.750668 0.259043 9.667525-9.524181 9.784248-25.083143 0.259043-34.750668L552.305246 81.813557c-11.058985-11.331339-25.865391-17.688643-41.702849-17.905707-0.277473-0.004096-0.554946-0.005119-0.832419-0.005119-15.559985 0-30.237381 5.957989-41.412066 16.831651-0.124914 0.121842-0.249828 0.245732-0.372694 0.370646L131.339914 423.017198z"
                p-id="3740"
              ></path>
            </svg>
            <span class="spanfont">日同比 19.54%</span>
            <svg
              t="1662038122255"
              class="icon"
              viewBox="0 0 1025 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5715"
              width="16"
              height="16"
            >
              <path
                d="M467.985218 937.525717c0.122866 0.124914 0.24778 0.248804 0.372694 0.370646 11.174684 10.873662 25.852081 16.831651 41.412066 16.831651 0.277473 0 0.554946-0.001024 0.832419-0.005119 15.837458-0.217064 30.643864-6.574368 41.702849-17.905707l334.741901-339.769178c9.525205-9.667525 9.408482-25.226487-0.259043-34.750668-9.666501-9.524181-25.227511-9.408482-34.750668 0.259043l-315.80719 320.551874L536.230246 88.475979c0-13.5716-11.001648-24.573248-24.573248-24.573248-13.5716 0-24.573248 11.001648-24.573248 24.573248l0 798.397108L166.360888 561.132161c-9.52111-9.670597-25.080071-9.791415-34.750668-0.269282-9.670597 9.52111-9.791415 25.080071-0.270306 34.750668L467.985218 937.525717z"
                p-id="5716"
              ></path>
            </svg>
          </template> </Detail
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from "./Detail";
import LineCharts from "./lineChart";
import BarCharts from "./barChart";
import ProgressCharts from "./progressCharts";
export default {
  name: "Card",
  components: { Detail, LineCharts, BarCharts, ProgressCharts },
};
</script>

<style>
.spanfont {
  font-size: 14px;
}
.el-card__body {
  padding-bottom: 5px;
}
</style>